<template>
    <div class="body">
        <VHeader title="团队资料" />
        <div class="form">
            <div class="title">团队基本信息</div>
            <div class="flex">
                <div class="left">团队名称</div>
                <div class="right" v-text="info.teamName"></div>
            </div>
            <div class="flex">
                <div class="left">团队介绍</div>
                <div class="right" v-text="info.description"></div>
            </div>
            <div class="flex">
                <div class="left">审核状态</div>
                <div class="right">
                    <span :class="'status- status-'+info.status">
                        {{info.status|myOrderStatus}}
                    </span>
                </div>
            </div>
            <div class="title">团队统计信息</div>
            <div class="flex">
                <div class="left">团队成员</div>
                <div class="right"><span>申请 <span v-text="info.userCount"></span> 人</span><span>审核 <span v-text="info.userCountPass"></span> 人</span></div>
            </div>
            <div class="flex">
                <div class="left">详细地点</div>
                <div class="right"><span v-text="info.area"></span> <span v-text="info.village"></span></div>
            </div>
            <div class="flex">
                <div class="left">联系人</div>
                <div class="right" v-text="info.contactName"></div>
            </div>
            <div class="flex last">
                <div class="left">联系电话</div>
                <div class="right" v-text="info.contactMobile"></div>
            </div>
            <img :src="info.thumbImage" width="100%" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "Feedback",
        data(){
            return {
                info: {},
            }
        },
        methods:{
            async get(){
                let res = await this.$http({
                    method: 'api.team.getInfo',
                });
                this.info = res.data.info;
            }
        },
        created() {
            this.get();
        }
    };
</script>

<style lang="scss" scoped>
    .body {
        font-size: 14px;
    }
    .title {
        padding: 0.3rem 0;
        line-height: 120%;
        font-size: 120%;
        border-bottom: 1px solid #CBCACA;
        margin-bottom: 0.2rem;
        color:#CA5B4D;
    }
    .form {
        padding:0 0.3rem;
        > .flex {
            padding: 0.1rem 0;
            border-bottom: 1px dashed #CCC;
            &.last {
                margin-bottom: .3rem;
                border: 0;
            }
        }
        .left {
            padding: 10px;
        }
        .right {
            padding: 10px;
            flex-grow: 1;
            input {
                line-height: 30px;
            }
            input, textarea {
                width:100%;
                border: 1px solid #e3e3e3;
            }
        }
    }
    .buttons {
        margin-top: 0.5rem;
        .apply {
            border:0;
            color: white;
            font-size: 130%;
            padding: 0.2rem 0;
            width: 85%;
            border-radius: 4px;
            background-color: #F65D5D;
        }
    }
    .status- {
        padding:2px 5px;
    }
    .status-0{
        border: 1px solid #b5bbbe;
        color: #b5bbbe;
    }
    .status-1{
        border: 1px solid #0A930A;
        color: #0A930A;
    }
</style>